<template>
	<echartBox title="当日供应" width="651px" height="427px">
		<div class="daily-supply-container">
			<div class="supply-item planned-supply">
				<div class="supply-value">
					{{ supplyData.planned.value
					}}<sup class="supply-unit">{{
						supplyData.planned.unit
					}}</sup>
				</div>
				<div class="supply-label">
					{{ supplyData.planned.label }}
				</div>
				<lottie-animation 
					:animation-data="animationData"
					:width="210"
					:height="210"
					class="supply-animation"
				/>
			</div>
			<div class="supply-item actual-supply">
				<div class="supply-value">
					{{ supplyData.actual.value
					}}<sup class="supply-unit">{{
						supplyData.actual.unit
					}}</sup>
				</div>
				<div class="supply-label">
					{{ supplyData.actual.label }}
				</div>
				<lottie-animation 
					:animation-data="animationData"
					:width="210"
					:height="210"
					class="supply-animation"
				/>
			</div>
		</div>
	</echartBox>
</template>

<script>
import echartBox from "../echart-box.vue";
import lottieAnimation from "../lottie-animation.vue";
import animationData from "../../images/json/data.json";

export default {
	name: "Page1ItemBox1",
	components: {
		echartBox,
		lottieAnimation,
	},
	data() {
		return {
			animationData: animationData
		};
	},
	props: {
		supplyData: {
			type: Object,
			required: true,
			default: () => ({
				planned: { value: 0, unit: "万/m³", label: "计划供应量" },
				actual: { value: 0, unit: "万/m³", label: "实际供应量" }
			})
		}
	},
	methods: {
		// 初始化方法（当日供应不需要图表初始化）
		initChart() {
			// 当日供应组件已加载，包含动态Lottie动画
			console.log('当日供应组件已加载，动画效果已启用');
		},
	},
};
</script>

<style scoped lang="scss">
// 组件内部变量定义
$primary-color: #fff;
$secondary-color: rgba(255, 255, 255, 0.8);

.daily-supply-container {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 40px 0px;
	box-sizing: border-box;

	.supply-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		position: relative;
		height: 80%;
		padding: 30px 20px 40px;

		.supply-value {
			font-size: 44px;
			font-weight: bold;
			color: #00d4ff;
			text-shadow: 0 0 15px rgba(0, 212, 255, 0.8);
			letter-spacing: 1px;
			text-align: center;
			line-height: 1;
			margin-bottom: 10px;
			position: relative;
			z-index: 1;
		}

		.supply-unit {
			font-size: 20px;
			color: $secondary-color;
			margin-left: 4px;
			vertical-align: baseline;
		}

		.supply-label {
			font-size: 24px;
			color: $primary-color;
			text-align: center;
			line-height: 1;
			position: relative;
			z-index: 1;
		}

		.supply-animation {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			z-index: 0;
		}
	}

	.supply-item:first-child {
		margin-left: 0;
	}

	.supply-item:last-child {
		margin-right: 0;
	}
}
</style>